<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QQ气泡IDs</title>
<!-- <link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css" /> -->
<!-- <script src="https://kenwheeler.github.io/slick/js/native.js" type="text/javascript"></script> -->
<!-- <link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/css/style.css"> -->

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> -->

<link href="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<link rel="shortcut icon" type="image/png" href="https://srxxq.cn/favicon.ico"/>

<!-------------- ------------script ---------------------------->
<script type="text/javascript">
var imgDomain2="https://gxh.vip.qq.com/xydata/bubble/item/";
var imgDomain="http://i.gtimg.cn/qqshow/admindata/comdata/vipBubble_item_";
var imgFormat="/mobile_list.jpg";
/* ID: 1~4996 */
var imgFormat1="/250x300_1.png"; 
/* ID: 7249~25894*/  
var imgFormat2="/newPreview1.png"; 
var imgFormat3="/newPreview2.png"; 

var setupURL="https://zb.vip.qq.com/v2/pages/itemDetail?appid=2&itemid=";
var get_rows;
var get_slidesPerRow;

$(document).ready(function(){
    var url = new URL(window.location.href);
    
    $( "#min" ).val((url.searchParams.get("min")==null?1:url.searchParams.get("min")))
    $( "#max" ).val((url.searchParams.get("max")==null?1000:url.searchParams.get("max")));
    get_rows = url.searchParams.get("row")==null?5:url.searchParams.get("row")
    get_slidesPerRow = url.searchParams.get("per")==null?4:url.searchParams.get("per");
    $( "#row" ).val(get_rows);
    $( "#per" ).val(get_slidesPerRow);

    loadIdRange();

    $('.reload').click(function() {
    location.reload();
    });

     $('input').keypress(function (e) {
        if (e.which == 13) {
            $( "#min, #max" ).change();
            $('.submit').click();
            return false;    //<---- Add this line
    }});

});


$(document).ready(function(){
    var slideIndex= 1
    var imgUrl;
    var imgFormat="https://gxh.vip.qq.com/xydata/bubble/item/<id>/250x300_1.png"; 

    $('.submit').on('click', function() {
      var url = window.location.href.split('?')[0]+"?min=" +$( "#min" ).val()+"&max=" + $( "#max" ).val()+"&row=" + $( "#row" ).val()+"&per=" + $( "#per" ).val();
      window.location.href = url;
    });
    
    $('.slider-nav').slick({
      lazyLoad: 'ondemand',
      infinite: true,
      dot:true,
      // slidesToShow: 3,
      // slidesToScroll: 3,
      rows: get_rows,
      slidesPerRow: get_slidesPerRow,
      // dots: true,
    });
    $( "#min, #max" ).change(function() {
        var min = parseInt($( "#min" ).val());
        var max = parseInt($( "#max" ).val());
        var minDefault = parseInt($( "#minDefault" ).val());
        var maxDefault = parseInt($( "#maxDefault" ).val());
        var diff = maxDefault - minDefault;
      if($('#keepDiff').is(':checked')){
          if(this.id == "min"){
            max= min+diff;
          }else{
            min= max-diff;
            min = (min <= 0 ? 1 : min);
          }
      }
        $( "#min" ).val(min);
        $( "#max" ).val(max)
        $( "#minDefault" ).val($( "#min" ).val());
        $( "#maxDefault" ).val($( "#max" ).val());
    });

    $('.slider-nav').on('lazyLoadError', function(event, slick, image, imageSource) {
        console.log();
        imgErr(image.attr("id"),0);
    });
});


function imgErr(id, method) {
    var image = $('#'+id)    
    image.attr("onerror", "imgErr("+id+","+ (method+1)+")");
    image.attr("class","");
    if(method==3){
        $("#"+id).replaceWith("<h3 id=\""+id+"\">"+id+"</h3>");
    }else{
        image.attr("src",imgDomain+id+eval("imgFormat"+(method+1)));
    };
    return true;
}
function loadIdRange(){
    var i;
    var node;
    var min = parseInt($( "#min" ).val());
    var max = parseInt($( "#max" ).val());
    if(min > max){
        var max = $( "#min" ).val();
        var min = $( "#max" ).val()
        $( "#min" ).val(min);
        $( "#max" ).val(max);
    }
    $( "#minDefault" ).val($( "#min" ).val());
    $( "#maxDefault" ).val($( "#max" ).val());

    for (i = min; i <= max; i++) {
        node = document.createElement("div");
        node.innerHTML = "<div class=\"slider-holder\">"+
            "<a href=\""+ setupURL + i +"\" >"+
                "<img id=\""+i+"\" alt=\""+i+"\" data-lazy=\""+imgDomain+i+imgFormat+"\" />"+
                "<div class=\"slider-bottom\">"+i+"</div>"+
            "</a></div>";
        //node.innerHTML = "<div class=\"slider-holder\"><a href=\""+ setupURL + i +"\" ><div class=\"slider-top\"></div><div class=\"slider-middle\"><img id=\""+i+"\" alt=\""+i+"\" data-lazy=\""+imgDomain+i+imgFormat+"\" /></div><div class=\"slider-bottom\">"+i+"</div></a></div>";
        node.className="pp";
      $( ".slider-nav" ).append(node );
    }      
}
</script>
<!-------------- ------------CSS ---------------------------->
<style type="text/css">
body, a, .input-group-text{color:#808080; font-weight: 600}
.head {
    background: #e9ecef;
    border-bottom: 1px solid #ced4da;
    height: 4em;
}
.head .logo{ padding-top: 0.5em;
    margin-bottom: -22px;}
.footer .logo{margin-left:-4px;}
.head img{
    border-radius: 50%;
    height: 36px;
    width: 36px;
}
.input-group{
    margin-bottom: 0.2em; 
    margin-top: 0.2em; 
}
.submit{ border: 1px solid #ced4da; color:#808080;}
.slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slick-track{
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-slider{ margin: 20px auto 20px; }
.slick-slide .slider-holder {
    border:1px solid #ced4da;
    background: #white;
    border-radius: 8px;
    margin:1px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
}
.slider-top{
    background: #e9ecef;
    height:0.5em;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
.slider-middle {
    padding: 3px;
}
.slick-slide img{
    border:0;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    width: 100%;
}
.slider-bottom {
    background: #e9ecef;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}
p {margin-top: 0; margin-bottom: 0.2rem; font-weight: initial;font-size: 0.5rem;}
.slick-arrow{background: gray;border-radius: 10px;}
.slick-arrow:hover{background: gray;}
.footer{
  border-top:1px solid #ced4da;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #efefef;
  text-align: center;
}
.footer img{ height:3em; }
.author {padding-top: 0.75em;}
.footer-pad{ height:3em; }
</style>
</head>
<body class="">
<div class="head text-center container-fluid">
    <div class="row" style="overflow: hidden;">
        <div class="col-2 logo"><img src="https://www.srxxq.cn/assets/images/itxiao.png"/></div>

            <div class="col-8"><h2>QQ气泡 ID</h2></div>
            <div class="col-2"></div>
    </div>
    <div class="row"><div class="col-12" style="white-space: nowrap;text-overflow: ellipsis;"><p>动态加载, 间隔超过5000会慢。2020-09-14：很多空ID，最高500038</p></div></div>
</div>

    <div class="container-fluid">
        <div class="container-fluid">
        <div class="form input-group input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">每行</span>
            </div>
            <input type="number" class="form-control" id="per" value="" />
            <div class="input-group-append">
                <span class="input-group-text">张</span>
            </div>
            <div style="width:2px;"></div>
            <div class="input-group-prepend">
                <span class="input-group-text">每页</span>
            </div>
            <input type="number" class="form-control" id="row" value="" />
            <div class="input-group-append">
                <span class="input-group-text"">行</span>
            </div>
        </div>
        <div class="form input-group input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">由</span>
            </div>
            <input type="number" class="form-control" id="min" value="" />
            <div style="width:2px;"></div>
            <div class="input-group-prepend">
                <span class="input-group-text">至</span>
            </div>
            <input type="number" class="form-control" id="max" value="" />
            <input hidden type="number" class="form-control" id="minDefault" value="" />
            <input hidden type="number" class="form-control" id="maxDefault" value="" />
        </div>
        <div class="form row">
            <div class="col-4"><div class="custom-control custom-switch">
              <input type="checkbox" class="custom-control-input" checked id="keepDiff">
              <label class="custom-control-label" for="keepDiff">保持ID间隔</label>
            </div></div>
            <div class="col-4"><button type="button" class="submit btn btn-block">显示</button></div>
            <div class="col-4 text-left"></div>
        </div>
        <div class="slider slider-nav">
        </div>
        <div class="footer-pad">
        </div>
    </div>
    </div>
<div class="footer">
    <div class="row">
        <div class="col-3"></div>
        <div class="col-6 logo"><a href="https://srxxq.cn/"><img src="https://srxxq.cn/template/test999_game_16080201/999test_cn_img/extend/logo.png" ></a></div>
        <div class="col-3 text-right author">by <a href="http://fafa.live">花羽月</a></div>
    </div>
</div>
</body>
</html>
